<template>
    <!-- 账号设置首页菜单项显示内容 -->
    <div id="user-center-accountSettings-accountSettingsIndex-contrainer">
        <el-row id="user-center-accountSettings-accountSettingsIndex-contrainer-header">
            <span>
                账号风险评估1
            </span>
        </el-row>
        <el-row id="user-center-accountSettings-accountSettingsIndex-contrainer-main">
            <el-row >
                <el-divider/>
                <el-col :lg="16">
                    <span >
                        定期修改密码
                    </span>
                </el-col>
                <el-col :lg="6">
                    <span :class="pwdStatusColor">
                        <svg-icon :icon-class="pwdStatusImg"/>{{pwdStatus}}
                    </span>
                </el-col>
                <el-col :lg="2">
                    <span >
                        <div @click="showView('/updatePassword')" v-if="pwdDisplay" class="displayColor">立即修改</div>
                    </span>
                </el-col>
            </el-row>
            <el-row >
                <el-divider/>
                <el-col :lg="16">
                    <span>
                        绑定安全手机
                    </span>
                </el-col>
                <el-col :lg="6">
                    <span :class="phoneStatusColor"> 
                        <svg-icon :icon-class="phoneStatusImg"/>{{phoneStatus}}
                    </span>
                </el-col>
                <el-col :lg="2">
                    <span>
                        <div @click="showView('/updatePhoneStep1')" v-if="phoneDisplay" class="displayColor">立即绑定</div>
                    </span>
                </el-col>
            </el-row>
            <el-row >
                <el-divider/>
                <el-col :lg="16">
                    <span>
                        绑定安全邮箱
                    </span>
                </el-col>
                <el-col :lg="6">
                    <span :class="emailStatusColor">
                        <svg-icon :icon-class="emailStatusImg"/>{{emailStatus}}
                    </span>
                </el-col>
                <el-col :lg="2">
                    <span>
                        <div @click="showView('/updateEmail')" v-if="emailDisplay" class="displayColor">立即绑定</div>
                    </span>
                </el-col>
            </el-row>
            <el-row >
                <el-divider/>
                <el-col :lg="16">
                    <span>
                        绑定第三方登录
                    </span>
                </el-col>
                <el-col :lg="6" :class="loginStatusColor">
                    <span>
                        <svg-icon :icon-class="loginStatusImg"/>{{loginStatus}}
                    </span>
                </el-col>
                <el-col :lg="2">
                    <span>
                        <div @click="showView('/bindLoginMethod')" v-if="loginDisplay" class="displayColor">立即绑定</div>
                    </span>
                </el-col>
            </el-row>
        </el-row>
    </div>    
</template>
<script>
import cookie from 'js-cookie'

export default {
    name: 'AccountSettingsIndex',
    data(){
        return{
            user:{
                // name:'',
                // phone:'',
                // email:'',
                // updatedTime:'1970/1/1'
            },
            //用户信息的状态
            pwdStatusImg:'warning',
            pwdStatus:'存在风险',
            pwdStatusColor:'statusColorO',
            pwdDisplay:true,
            phoneStatusImg:'warning',
            phoneStatus:'存在风险',
            phoneStatusColor:'statusColorO',
            phoneDisplay:true,
            emailStatusImg:'warning',
            emailStatus:'存在风险',
            emailStatusColor:'statusColorO',
            emailDisplay:true,
            loginStatusImg:'warning',
            loginStatus:'存在风险',
            loginStatusColor:'statusColorO',
            loginDisplay:true,
        }
    },
    created(){
        this.getUser()
        this.userStatus()
    },
    methods: {
        //从cookie中获取用户信息
        getUser(){
            this.user=JSON.parse(cookie.get("userInfo"))
            console.log(this.user)
        },
        //判读用户状态
        userStatus(){            
            console.log("计算时间")
            //判断密码修改时间(实际上是判断用户的上次修改时间)
            //用当前时间减去修改时间的时间差的毫秒数是否大于一天的毫秒数如果打就存在风险
            if((Date.parse(new Date())-Date.parse(this.user.updatedPwdtime))>=3600*24*1000){
                this.pwdStatusImg='warning'
                this.pwdStatus='存在风险'
                this.pwdStatusColor='statusColorO'
                this.pwdDisplay=true
            }else{
                this.pwdStatusImg='normal'
                this.pwdStatus='正常'
                this.pwdStatusColor='statusColorG'
                this.pwdDisplay=false
            }
            //判断用户信息中是否有phone信息
            if(this.user.phone==''||this.user.phone==null){
                console.log("为空")
                this.phoneStatusImg='warning'
                this.phoneStatus='存在风险'
                this.phoneStatusColor='statusColorO'
                this.phoneDisplay=true
            }else{
                console.log("不为空")
                this.phoneStatusImg='normal'
                this.phoneStatus='正常'
                this.phoneStatusColor='statusColorG'
                this.phoneDisplay=false
            }
            //判断用户信息中是否有email信息
            if(this.user.email==''||this.user.email==null){
                console.log("为空")
                this.emailStatusImg='warning'
                this.emailStatus='存在风险'
                this.emailStatusColor='statusColorO'
                this.emailDisplay=true
            }else{
                console.log("不为空")
                this.emailStatusImg='normal'
                this.emailStatus='正常'
                this.emailStatusColor='statusColorG'
                this.emailDisplay=false
            }
            //判断用户信息中是否有第三方登录信息(测试用name信息代替第三方信息)
            if(this.user.name==''||this.user.username==null){
                this.loginStatusImg='warning'
                this.loginStatus='存在风险'
                this.loginStatusColor='statusColorO'
                this.loginDisplay=true
            }else{
                console.log("登录不为空")
                this.loginStatusImg='normal'
                this.loginStatus='正常'
                this.loginStatusColor='statusColorG'
                this.loginDisplay=false
            }
        },
         // 点击下拉悬浮菜单触发事件
        showView(index) {
            this.$router.push({
                path: index
            })
        },
        
    }
}
</script>
<style>
    #user-center-accountSettings-accountSettingsIndex-contrainer-header {
        font-size: 20px;
    }
    #user-center-accountSettings-accountSettingsIndex-contrainer-main .el-row .el-col {
        font-size: 14px;
    }
    /* #accountSettingsIndex-warning .el-col:nth-last-child(2) {
        color: #f3730c;
    }
    #accountSettingsIndex-warning .el-col:last-of-type  {
        cursor: pointer;
        color: rgb(35, 117, 211);
        text-align: center;
    }
    #accountSettingsIndex-normal .el-col:nth-last-child(2) {
        color:rgb(15, 231, 15);
    } */

    /* 新增 */
    .statusColorG{
        color: rgb(15, 231, 15);
    }
    .statusColorO{
        color: #f3730c;
    }
    .displayColor {
        cursor: pointer;
        color: rgb(35, 117, 211);
        text-align: center;
    }

</style>